<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
			    xmlns:ui="http://java.sun.com/jsf/facelets"
			    xmlns:h="http://java.sun.com/jsf/html"
			    xmlns:f="http://java.sun.com/jsf/core"    
			    template="./template/template_login.xhtml">
    
    <ui:define name="title">
        Listado de Egresos
    </ui:define>
    
    <ui:define name="content">        			
			<h:form id="listadoEgresosForm" styleClass="fields">								
				<f:event listener="#{expensesBean.fillDropDowns}" type="preRenderView" />
								
				<div class="box box-100 altbox">
					<div class="boxin">
						<div class="header">
							<h3>Listado de Egresos</h3>
							<h:commandLink action="#{expensesBean.goAddExpenses}" value="Nuevo Egreso" styleClass="button"/>		
						</div>
						
						<h:messages id="messages" errorClass="msg msg-error" infoClass="msg msg-info" />
						<h:panelGrid columns="8">
												
							<h:outputLabel value="Proveedor:" />
							<h:selectOneMenu id="proveedorId" value="#{expensesBean.expensesSearchProvier}" >
								<f:selectItems value="#{expensesBean.suppliersList}" />
							</h:selectOneMenu>
							
							<h:outputLabel value="Tipo de Ingreso:" />
							<h:selectOneMenu id="egresoId" value="#{expensesBean.expensesSearchCategory}">
									<f:selectItems value="#{expensesBean.expensesItems}" />
							</h:selectOneMenu>
							
							<h:outputLabel value="Mes:" />
							<h:selectOneMenu id="mesId" value="#{expensesBean.expensesSearchMonth}" >
								<f:ajax render="@none" execute="@this" />
								<f:selectItem itemValue="1" itemLabel="Enero" />
								<f:selectItem itemValue="2" itemLabel="Febrero" />
								<f:selectItem itemValue="3" itemLabel="Marzo" />
								<f:selectItem itemValue="4" itemLabel="Abril" />
								<f:selectItem itemValue="5" itemLabel="Mayo" />
								<f:selectItem itemValue="6" itemLabel="Junio" />
								<f:selectItem itemValue="7" itemLabel="Julio" />
								<f:selectItem itemValue="8" itemLabel="Agosto" />
								<f:selectItem itemValue="9" itemLabel="Septiembre" />
								<f:selectItem itemValue="10" itemLabel="Octubre" />
								<f:selectItem itemValue="11" itemLabel="Noviembre" />
								<f:selectItem itemValue="12" itemLabel="Diciembre" />
							</h:selectOneMenu>
							
							<h:outputLabel value="A&#241;o:" />
							<h:selectOneMenu id="anioId" value="#{expensesBean.expensesSearchYear}">
								<f:ajax render="@none" execute="@this" />                        
								<f:selectItem itemValue="2010" itemLabel="2010" />
								<f:selectItem itemValue="2011" itemLabel="2011" />
								<f:selectItem itemValue="2012" itemLabel="2012" />
								<f:selectItem itemValue="2013" itemLabel="2013" />
								<f:selectItem itemValue="2014" itemLabel="2014" />
								<f:selectItem itemValue="2015" itemLabel="2015" />
								<f:selectItem itemValue="2016" itemLabel="2016" />
								<f:selectItem itemValue="2017" itemLabel="2017" />
								<f:selectItem itemValue="2018" itemLabel="2018" />
								<f:selectItem itemValue="2019" itemLabel="2019" />
								<f:selectItem itemValue="2020" itemLabel="2020" />
							</h:selectOneMenu>	
							
							<f:facet name="footer">
								<h:panelGroup style="text-align:right">		  
								  <h:commandButton id="buscarId" styleClass="button altbutton" value="Buscar" action="#{expensesBean.searchAction}" />
								</h:panelGroup>
							 </f:facet>
												
						</h:panelGrid>													
					</div>					
				</div>

				<h:panelGroup styleClass="box box-100 altbox" rendered="#{expensesBean.showTable}">				
					<div class="boxin">
						<div class="content">
							<h:dataTable value="#{expensesBean.expensesList}" var="row" rendered="#{expensesBean.showTable}">										
								<h:column>		
									<f:facet name="header"></f:facet>									
									<ul class="actions">
										<li>
											<h:commandLink styleClass="ico" action="#{expensesBean.deleteExpensesAction}" onclick="return confirm('Eliminar Egreso?');">	
												<f:param name="expensesId" value="#{row.id}" />	
												<h:graphicImage value="resources/images/led-ico/delete.png" alt="Eliminar Egreso" style="border:0;" />						 							 	
											</h:commandLink>
										</li>
										<li>
											<h:commandLink styleClass="ico" action="#{expensesBean.goEditExpensesAction}">	
												<f:param name="expensesId" value="#{row.id}" />	
												<h:graphicImage value="resources/images/led-ico/pencil.png" alt="Modificar Egreso" style="border:0;" />						 							 	
											</h:commandLink>
										</li>
									</ul>			
								</h:column>
								
								<h:column>		
									<f:facet name="header"> <h:outputLabel value="Fecha" /></f:facet>		
									#{row.date}
								</h:column>																				
								
								<h:column>
									<f:facet name="header"><h:outputLabel value="Proveedor"  /></f:facet>
									#{row.suppliersView.name}
								</h:column>																			
															
								<h:column>
									<f:facet name="header"><h:outputLabel value="Descripcion" /></f:facet>
									#{row.expensesItemView.description}
								</h:column>
								
								<h:column>
									<f:facet name="header"><h:outputLabel value="Comentarios" /></f:facet>
									#{row.comments}
								</h:column>
								
								<h:column>		
									<f:facet name="header"> <h:outputLabel value="Importe" /></f:facet>		
									#{row.amount}
								</h:column>
								
								<f:facet name="footer">
									<div style="text-align:right">
										TOTAL : #{expensesBean.total}&#160;&#160;
									</div>							
								</f:facet>
							</h:dataTable>	
							
						</div>						
					</div>
				</h:panelGroup>																
			</h:form>			
	</ui:define>
    
</ui:composition>